<!--
 * @title:
 * @params1: 参数1
 * @params2: 参数2
 * @params3: 参数3
 * @params4: 参数4
 * @method1: 参数1
 * @method1: 参数2
 * @method1: 参数3
 * @method1: 参数4
 * @description: 全日历组件，带多种视图
 * @fileName: calendarRes.vue
 * @author: donghang
 * @date: 2020-11-08 11:13:07
!-->
<template>
  <div class="tl-full-calendar">
    <FullCalendar ref="calendar" :options="calendarOptions" />
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue' // vue核心组件
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import interactionPlugin, { Draggable } from '@fullcalendar/interaction' // 一些交互
import { formatDate } from '@tapui/utils/date'
import '@fullcalendar/timeline/main.css'
import '@fullcalendar/resource-timeline/main.css'
export default {
  name: 'TlCalendarRes',
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarOptions: {
        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
        plugins: [resourceTimelinePlugin, interactionPlugin],
        initialView: 'resourceTimelineDay',
        buttonText: {
          today: '今天',
          day: '日',
          week: '周',
          month: '月'
        },
        allDayText: '全天',
        headerToolbar: false,
        resourceAreaHeaderContent: '',
        // 资源排列顺序
        resourceOrder: '',
        resources: [],
        resourceAreaWidth: '250px',
        // 中文
        locale: 'zh-cn',
        // 自动根据外部元素大小设置日历大小
        height: '100%',
        // 日历事件中展示的日期格式
        eventTimeFormat: {
          // like '14:30:00'
          hour: '2-digit',
          minute: '2-digit',
          hour12: false
        },
        // 显示为星期几的样子，默认是周几
        dayHeaderFormat: {
          weekday: 'long'
        },
        expandRows: true,
        nowIndicator: true,
        dayMaxEvents: true,
        views: {
          resourceTimeline: {
            dayMaxEventRows: 6 // adjust to 6 only for timeGridWeek/timeGridDay
          }
        },
        // 当用户点击“更多”链接时发生的动作，支持"popover", "week", "day", view name, function。
        // 事件显示方式
        slotLabelInterval: { hours: 1 },
        // 日视图中，左侧时间显示方式
        slotLabelFormat: this.formatTimeShow,
        // 下面三个属性，让事件可以拖动
        eventDrop: this.eventDrop,
        eventResize: this.eventResize,
        events: this.eventSearch,
        // 日期点击
        dateClick: this.dateClick,
        // 事件点击
        eventClick: this.eventClick,
        eventMouseEnter: this.eventMouseEnter,
        eventMouseLeave: this.eventMouseLeave,
        datesSet: this.datesSet
      }
    }
  },
  methods: {
    dateClick(info) {
      info.jsEvent.preventDefault()
      this.$emit('dateClick', info)
    },
    eventClick(info) {
      info.jsEvent.preventDefault()
      this.$emit('eventClick', info)
    },
    eventMouseEnter(info) {
      this.$emit('eventMouseEnter', info)
    },
    eventMouseLeave(info) {
      this.$emit('eventMouseLeave', info)
    },
    eventSearch(info, successCallback, failureCallback) {
      this.$emit('eventSearch', info, successCallback, failureCallback)
    },
    eventDrop(dropInfo) {
      this.$emit('eventTimeChange', dropInfo)
    },
    eventResize(dropInfo) {
      this.$emit('eventTimeChange', dropInfo)
    },
    datesSet(dateInfo) {
      this.$emit('datesSet', dateInfo)
    },
    refresh() {
      this.$refs.calendar.getApi().refetchEvents()
    },
    /** 格式化日期显示 */
    formatTimeShow(date) {
      if (this.$refs.calendar.getApi().view.type === 'resourceTimelineDay') {
        return `${(date.date.hour < 10 ? '0' : '') + date.date.hour}:${(date.date.minute < 10 ? '0' : '') + date.date.minute}`
      } else if (this.$refs.calendar.getApi().view.type === 'resourceTimelineWeek') {
        let currentDate = new Date(date.date.year + '-' + (date.date.month + 1) + '-' + parseInt(date.date.day)).getDay()
        return `${date.date.month + 1 + '月' + parseInt(date.date.day) + '日'}(${this.formatWeek(currentDate)})`
      }
    },
    formatWeek(days) {
      switch (days) {
        case 1:
          days = '星期一'
          break
        case 2:
          days = '星期二'
          break
        case 3:
          days = '星期三'
          break
        case 4:
          days = '星期四'
          break
        case 5:
          days = '星期五'
          break
        case 6:
          days = '星期六'
          break
        case 0:
          days = '星期日'
          break
      }
      return days
    }
  }
}
</script>

<style lang="scss">
.calendar-container {
  .fc .fc-button-primary:not(:disabled):active:focus,
  .fc .fc-button-primary:not(:disabled).fc-button-active:focus {
    -webkit-box-shadow: 0 0 0 0rem;
    box-shadow: 0 0 0 0rem;
  }
  .fc-h-event .fc-event-time {
    min-width: 36px;
  }
}
</style>
